<template>
	<view class="set-authority">
		<u-navbar title="设置员工权限"  :border-bottom="false"  >
		</u-navbar>
		<view class="set-authority__user">
			<view class="set-authority__user__info">员工姓名</view>
			<view class="set-authority__user__value">{{user.realName}}</view>
		</view>
		<view class="set-authority__authority">
			<view class="set-authority__authority__title">权限设置</view>
			<view class="set-authority__authority__list" v-for="(authority,index) in authorList" :key="index" @click="chooseAuthority(index)">
				<view class="set-authority__authority__list__name">
					{{authority.name}}
				</view>

				<view  class="set-authority__authority__list__choosebox">
					<view class="set-authority__authority__list__choosebox--choosed" v-if="choosed==index">
					
					</view>
				</view>
			</view>
		</view>

		<view class="set-authority__bottom-box">
			<view class="set-authority__bottom-box__cancel" @click="cancelModel=true">取消</view>
			<view class="set-authority__bottom-box__submit" @click="submitModel=true">提交</view>
		</view>
		<u-modal v-model="cancelModel"
			:show-title="false"
			content="确认取消"
			:show-cancel-button="true"
			confirm-color="#177fff"
			@confirm="goback">
		</u-modal>
		<u-modal v-model="submitModel" 
			:show-title="false"
			content="确认提交"
			:show-cancel-button="true"
			confirm-color="#177fff"
			@confirm="submit">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:"text",
				enterprise:{},
				authority:"",
				choosed:0,
				cancelModel:false,
				submitModel:false,
				authorList:[
					{
						name:"公司一级管理员",
						value:2,
					},{
						name:"公司二级管理员",
						value:3
					},{
						name:"普通员工",
						value:4
					},{
						name:"普通用户",
						value:5
					}
				],
			}
		},
		mounted(){
			this.user=this.$Route.query.user;
			console.log("query",this.$Route.query)
			console.log("user",this.user)
		},
	
		methods: {
			goback(){
				uni.navigateBack({
					
				})
			},
			chooseAuthority(index){
				this.choosed=index
			},
			submit(){
				let roleSetData={
					companyId:this.$store.state.userInfo.enterpriseId,
					role:this.authorList[this.choosed].value,
					donorPhone:this.user.phone,
					authorizedPhone:this.$store.state.userInfo.phone,
				}
				this.$Axios({
					url:this.$store.state.baseURL+"/user/role/set",
					method:"post",
					data:roleSetData
				}).then(response=>{
					if(response.data.state=="Success"){
						uni.showToast({
							title:"设置成功",
							icon:"none",
							duration:1000
						})
						setTimeout(function(){
							uni.navigateBack({
								
							})
						},1000)
					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:1000
						})
					}
				}).catch((error)=>{
					uni.showToast({
						title:error,
						icon:"none",
						duration:1000
					})
				})
			}
		}
	}
</script>

<style lang="less">
.set-authority{
	display: flex;
	flex-direction: column;
	&__user{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: @uni-spacing-row-base @uni-spacing-col-lg;
		&__info{
			font-weight: bolder;
		}
		&__value{
			
		}
	}
	&__authority{
		display: flex;
		flex-direction: column;
		
		&__title{
			margin: @uni-spacing-row-base @uni-spacing-col-lg;
			font-weight: bolder;
			color: @font-color-blue;
			
		}
		&__list{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin: 0  @uni-spacing-col-lg;
			padding: @uni-spacing-row-lg 0;
			border-bottom: @line-light-size solid @uni-border-color;
			&__choosebox{
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				width: @icon-base;
				height: @icon-base;
				border-radius: 50%;
				background-color:transparent;
				border: @line-border-size solid @font-color-blue;
				
				&--choosed{
					width: @icon-x-sm;
					height: @icon-x-sm;
					margin: auto auto;
					border-radius: 50%;
					background-color:@font-color-blue;
				}
			}
		}
		&__list:hover{
			width: calc(100vw);
			transform: 2s;
			background-color: @uni-bg-color-hover;
			margin-left: 0;
			margin-right: 0;
			padding-right:  @uni-spacing-col-lg;
			padding-left:  @uni-spacing-col-lg;
		}
	}
	&__bottom-box{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		position: fixed;
		padding: @uni-spacing-row-lg @uni-spacing-col-lg;
		bottom: 0;
		width: calc(100vw);
		background-color: #fff;
		
		&__cancel{
			margin-right: @uni-spacing-col-lg;
			padding-top: @uni-spacing-row-base;
			padding-bottom: @uni-spacing-row-base;
			text-align: center;
			flex: 0.5;
			border-radius: @uni-border-radius-base;
			border: 1px solid @font-color-blue;
			font-size: @uni-font-size-lg;
			color: @font-color-blue;
		}
		&__submit{
			padding-top: @uni-spacing-row-base;
			padding-bottom: @uni-spacing-row-base;
			text-align: center;
			flex: 1;
			border-radius: @uni-border-radius-base;
			border: 1px solid @font-color-blue;
			background-color: @uni-bg-color-blue;
			font-size: @uni-font-size-lg;
			color: #fff;
		}
	}

	
}

</style>
